<template>
  <div class="tobBtoC">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">外部导入</div>
      </div>
      <div class="fr">
        <el-button
          @click="$router.back()"
          size="mini"
          >返回</el-button
        >
      </div>
    </div>
    <el-form :inline="true" :model="form" label-width="60px" class="formList">
      <!-- <el-form-item label="账期" style="width: 20%">
        <el-date-picker
          style="width: 200px"
          v-model="form.acctYear"
          type="date"
          placeholder="选择账期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item style="width: 40%">
        <!-- <el-button
          style="margin-left: 20px"
          size="mini"
          type="primary"
          @click="handle_search"
          >查询</el-button
        > -->
        <el-button @click="downloadTemp" size="mini">模板下载</el-button>
        <el-button
          type="warning"
          @click="$refs.importDialog.dialogVisible = true"
          size="mini"
          >导入</el-button
        >
        <!-- <el-button
          style="margin-left: 20px"
          size="mini"
          type="primary"
          @click="$router.back()"
          >返回</el-button
        > -->
      </el-form-item>
    </el-form>
    <div class="table-content clearfix">
      <div class="content">
        <div class="tableBox">
          <el-table
            id="table1"
            ref="table"
            size="mini"
            :header-cell-style="{ background: '#eef1f6' }"
            :data="tableData"
            v-loading="tableLoading"
            style="width: 100%"
            border
          >
            <el-table-column prop="creatTime" label="导入时间" min-width="100">
              <template slot-scope="{ row }">
                {{ moment(row.creatTime).format("yyyy-MM-DD hh:mm:ss") }}
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" min-width="100" />
            <el-table-column prop="title" label="说明" min-width="100" />
            <el-table-column label="操作" width="190">
              <template slot-scope="{ row }">
                <el-button
                  type="text"
                  size="mini"
                  @click="handle_detail(row)"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  @click="handle_calc(row)"
                  >计算</el-button
                >
                <!-- <span @click="handle_del(row)" class="del-btn" style="margin: 0 10px">删除</span> -->
                <!-- <el-button
                  type="text"
                  size="mini"
                  @click="showExportDialog(row)"
                  >成果导出</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <ImportDialog ref="importDialog" @refresh="getData"></ImportDialog>
    <ExportDialog ref="exportDialog"></ExportDialog>

  </div>
</template>

<script>
import { getSessionStorage } from '@/common/js/storage'
import { getCookie } from "@/common/js/cookie";
import { $budgetAPI } from "@/api";
import { downLoadExcelParams } from "@/utils/zipdownload.js"
import { Loading } from 'element-ui';
export default {
  components: {
    ImportDialog: () => import("./components/importDialog.vue"),
    ExportDialog: () => import("./components/exportDialog.vue"),
  },
  data() {
    return {
      form: {
        acctYear: "",
      },
      year: '',
      areaId: JSON.parse(getSessionStorage('accountInfo')).areaId,
      tableData: [],
      tableLoading: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.tableLoading = true;
      let params = { token: getCookie("token") };
      // if(this.form.acctYear) params.acctYear = this.form.acctYear;
      $budgetAPI.getBudgetList(
        params,
        (res) => {
          if (res && res.code == 0) {
            this.tableData = res.content;
            this.year = this.form.acctYear ? this.form.acctYear.slice(0,4) : new Date().getFullYear();
          }
          this.tableLoading = false;
        }
      );
    },
    handle_search() {
      this.getData();
    },
    showExportDialog(row) {
      this.$refs.exportDialog.init(row);
    },
    handle_detail(row) {
      this.$router.push({
        path: "/budget/downToUpTrends2023/exportDetail",
        query: {
          logId: row.logId,
        },
      });
    },
    //计算
    handle_calc(row){
      const loading = Loading.service({
        lock: true,
        text: '计算中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      $budgetAPI.getCalculationBudgetList(
        { logId: row.logId + "", },
        res => {
          const { code, content } = res;
          if(code == 0){
            this.$message.success(content || '计算成功');
          } else {
            this.$message.error(content || '计算失败');
          }
          loading.close();
        },
        err => {
          loading.close();
          console.log(err);
        }
      )
    },
    handle_del(row) {
      this.$confirm("是否删除该条数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          $budgetAPI.deleteBudgetList(
            {
              logId: row.logId,
            },
            (res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
              this.getData();
            }
          );
        });
    },
    downloadTemp() {
      downLoadExcelParams(
        "/compileIncome/getBudgetTemplate",
        { token: getCookie("token") },
        "2023自上而下预算导入模板"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.remark {
  padding-top: 5px;
  text-align: left;

  .attention {
    font-weight: bold;
  }
}

.table-content {
  .table-header {
    display: flex;
    justify-content: space-between;

    .table-title {
      font-size: 14px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;

      span {
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: #418ee9;
        border-radius: 1000%;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 3px;
      }
    }
  }

  .content {
    margin-top: 15px;
  }
}
</style>
